import { Message } from 'element-ui';

<template>
  <el-container class="layout">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="system-title">啊嘿的港口堆费管理系统</h1>
        </div>
        <div class="header-right">
          <el-avatar
              class="header-avatar"
              :src="userAvatar"
              size="medium"
          ></el-avatar>
          <span class="header-username">{{ username }}</span>
        </div>
      </div>
    </el-header>
    <!-- 主体部分 -->
    <el-container>
      <!-- 左侧菜单栏 -->
      <el-aside class="sidebar">
        <el-menu
            :default-active="activeMenu"
            router
            class="el-menu-vertical-demo"
            background-color="#2c3e50"
            text-color="#fff"
            active-text-color="#ffd04b"
        >
          <el-menu-item index="/main/companies">货代公司管理</el-menu-item>
          <el-menu-item index="/main/port">港口管理</el-menu-item>
          <el-menu-item index="/main/import-orders">进口订单管理</el-menu-item>
          <el-menu-item index="/main/export-orders">出口订单管理</el-menu-item>
          <el-menu-item index="/main/warehouse">仓库</el-menu-item>
          <el-menu-item index="/main/fees">费用详情</el-menu-item>
          <el-menu-item index="/login" @click="handleLogout">退出</el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 主内容区 -->
      <el-main class="content">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'MainLayout',
  data() {
    return {
      activeMenu: '/main/companies',
      userAvatar: 'src/assets/9c0f5d77afabcde4f0b0c259c152c6e.jpg' // 默认用户头像
    };
  },
  computed: {
    ...mapState(['username'])
  },
  created() {
    // 初始显示货代公司管理页面
    this.$router.push('/main/companies');
  },
  methods: {
    handleLogout() {
      localStorage.removeItem('isAuthenticated');
      localStorage.removeItem('token');
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
/* 全局布局 */
.layout {
  height: 100vh;
  overflow: visible; /* 确保布局不会隐藏溢出的元素 */
}

/* 顶部导航栏样式 */
.header {
  background-color: #3a4a58;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
}

.system-title {
  margin: 0;
  padding: 0;
  font-size: 18px;
  color: white;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-avatar {
  margin-right: 10px;
}

.header-username {
  font-size: 16px;
  color: white;
}

/* 左侧菜单栏样式 */
.sidebar {
  width: 200px;
  height: calc(100vh - 64px); /* 减去 header 的高度 */
  background-color: #2c3e50;
}

.el-menu-vertical-demo {
  width: 100%;
  border-right: none;
}

/* 主内容区样式 */
.content {
  padding: 20px;
  background-color: #f0f4f7;
  overflow: visible; /* 确保内容区不会隐藏溢出的元素 */
}
</style>
